<script setup>
import {ref, onMounted, defineEmits} from "vue"
import {RequestModelPreviewList} from "@/api/Model.js"

const emit = defineEmits(["onGenSameModel"])

// 模型预览列表
const modelFilePreviewList = ref([]);

async function getModelPreviewList() {
  try {
    const res = await RequestModelPreviewList();
    modelFilePreviewList.value = res.data.data;
  }catch (e) {
    console.log("获取模型预览列表失败",e);
  }
}

// 生成同款
function genSameModelClicked(model){
  console.log("生成同款", model.localPreviewImagePath);
  emit("onGenSameModel", model.localPreviewImagePath);
}

onMounted(() => {
  getModelPreviewList();
});

</script>

<template>
  <div>
    <el-scrollbar height="80vh">
      <div class="imageBody">
        <div  v-for="item in modelFilePreviewList" :key="item.id">
          <div class="imageShow">
            <img style="width: 13vw;border-radius: 5px" :src="item.localPreviewImagePath"/>
            <!-- 按钮默认隐藏，hover 时显示 -->
            <button class="overlayButton" @click="genSameModelClicked(item)">生成同款</button>
          </div>
        </div>
      </div>
    </el-scrollbar>

  </div>
</template>

<style scoped lang="scss">
.imageBody{
  display: grid;
  grid-template-columns: repeat(5, 1fr);

}

.imageShow {
  margin: 5px;
  position: relative; /* 使按钮相对于图片定位 */
  overflow: hidden; /* 防止内容溢出 */

  border-radius: 3px;
  // 新增：边框和阴影
  border: 1px solid #e0e0e0; // 浅灰色边框
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); // 柔和的投影

  transition: box-shadow 0.3s ease; // 平滑过渡阴影
}

.imageShow img {
  width: 13vw;
  border-radius: 5px;
  display: block; /* 移除图片下方的空白间隙 */
}

/* 按钮样式 */
.overlayButton {
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 平滑过渡 */
  position: absolute; /* 绝对定位 */
  top: 85%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  width: 12vw;
}

/* 当 .imageShow 被 hover 时，改变按钮的透明度 */
.imageShow:hover .overlayButton {
  opacity: 1;
}
</style>
